<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<title>打印汇总</title>
		<link rel="stylesheet" href="../css/mui.min.css" />
		<link rel="stylesheet" href="../css/pravate/common.css" />
		<link rel="stylesheet" href="../css/mui.picker.min.css" />
		<script type="text/javascript" src="../js/template-web.js"></script>
		<script type="text/javascript" src="../js/mui.min.js"></script>
		<script type="text/javascript" src="../js/mui.picker.min.js"></script>
		<script type="text/javascript" src="../js/jquery-2.1.0.js"></script>
		<script type="text/javascript" src="../js/mobile-detect.min.js"></script>
		<script type="text/javascript" src="../js/config.js"></script>
		<script type="text/javascript" src="../js/common.js"></script>
	</head>
	<style>
		body,
		html {
			background: #efeff4;
		}
		
		.mui-content {
			margin-top: 10px;
		}
		
		.condition,
		.zTime {
			background: #fff;
			padding: 10px;
			margin: 5px;
			border-radius: 5px;
		}
		
		.condition h5{
			margin-bottom: 10px;
			display: block;
			padding: 0 0 5px 0;
			border-bottom: 1px solid #e7e7e7;
		}
		
		.condition button {
			margin-right: 20px;
			margin: 0 20px 0 0;
			padding: 10px 25px;
		}
		
		.condition .mui-btn-primary {
			background: #2F81D2;
		}
		
		.zTimes {
			display: flex;
			width: 100%;
			margin-top: 15px;
		}
		
		.zTimes input {
			flex: 1;
			height: 35px;
			margin: 0;
			font-size: 14px;
			padding-right: 0;
			padding-left: 5px;
		}
		
		.zTimes span {
			width: 10px;
			margin: 0 10px;
			border-top: 1px solid #CCC;
			margin-top: 17px;
		}
		
		#warpper{
			padding: 0;
		}
		#warpper li{
			margin-bottom: 10px;
		}
		#warpper li p{
			padding-left: 15px;
			font-size: 14px;
			color: #666666;
			line-height: 14px;
			margin-bottom: 5px;
		}
		
		#warpper li .select{
			position: relative;
			background: #fff;
			padding: 15px;
			font-size: 14px;
			color: #333333;
			line-height: 14px;
		}
		.select .selectRad{
			display: block;
			position: absolute;
			top: 10px;
			right: 15px;
			width: 23px;
			height: 23px;
		}
		.footer {
			position: fixed;
			left: 0;
			bottom: 0;
			width: 100%;
			padding: 25px 35px;
		}
		
		.footer button {
			width: 100%;
			padding: 15px 0;
			background: #2F81D2;
		}
		.selectRadiu, .unselectRadiu{
			background-size: 100% 100%;
			background-repeat: no-repeat;
		}
		.selectRadiu{
			background-image: url(../img/select.png);
		}
		.unselectRadiu{
			background-image: url(../img/unselect.png);
		}
	</style>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">打印汇总</h1>
		</header>
		<div class="mui-content">
			<div class="condition">
				<h5>选择时间段</h5>
				<button type="button" class="mui-btn mui-btn-primary" data-id="1">今天</button>
				<button type="button" class="mui-btn" data-id="2">昨天</button>
				<button type="button" class="mui-btn" data-id="3">本周</button>
				<div class="zTimes">
					<input type="text" readonly="readonly" placeholder="请选择开始时间" />
					<span></span>
					<input type="text" readonly="readonly" placeholder="请选择结束时间" />
				</div>
			</div>
			<ul id="warpper">
				<li class="warpper-item">
					<p>交易账单</p>
					<div class="select">汇总
						<span class="selectRad selectRadiu pay"></span>
					</div>
				</li>
				<li class="warpper-item">
					<p>预授权账单(未结算)</p>
					<div class="select" style="border-bottom: 1px solid #e7e7e7;">汇总
						<span class="selectRad unselectRadiu auth"></span>
					</div>
					<div class="select">明细
						<span class="selectRad unselectRadiu auth"></span>
					</div>
				</li>
			</ul>
		</div>
		<div class="footer">
			<button type="button" class="mui-btn mui-btn-primary prints">打印当前条件汇总</button>
		</div>
	</body>
	<script>
		mui.init();
		mui.plusReady(function() {
			/*点击快速选择时间段*/
			mui("body").on("tap", ".condition button", function() {
				$(this).addClass("mui-btn-primary").siblings().removeClass("mui-btn-primary");
				$(".zTimes input").val("");
			});
			//点击自定义选择时间段
			mui("body").on("tap", ".zTimes input", function() {
				self = $(this);
				$(".condition button").removeClass("mui-btn-primary");
				var today = new Date();
				var nowTime = today.getFullYear() + "-" + (today.getMonth() < 9 ? "0" + "" + (today.getMonth() + 1) : (today.getMonth() + 1)) + "-" + today.getDate() + " " + (((today.getHours() < 10)) ? ("0" + today.getHours()) : today.getHours()) + ":" + today.getMinutes();
				var dtpicker = new mui.DtPicker({
					"type": "datetime",
					"value": nowTime
				})
				dtpicker.show(function(e) {
					self.val(e.value + ':00');
					console.log(e.value);
				})
			})
			
			//点击汇总或详情
			mui('body').on('tap','.selectRad',function(){
				//实现单选效果 
				if($(this).hasClass('pay')){
					$('.auth').addClass('unselectRadiu');
					$('.auth').removeClass('selectRadiu');
				}else{
					$('.pay').addClass('unselectRadiu');
					$('.pay').removeClass('selectRadiu');
				};
				//实现多选效果
				if($(this).hasClass('selectRadiu')){
					$(this).addClass('unselectRadiu');
					$(this).removeClass('selectRadiu');
				}else{
					$(this).addClass('selectRadiu');
					$(this).removeClass('unselectRadiu');
				}
			})
			
			//点击打印
			mui("body").on("tap", ".prints", function() {
				var that = this;
				var status = false;
				var btn = $(".condition button");
				var Input = $(".zTimes input");
				var timeSign = "1";
				var start_time = "";
				var end_time = "";
				var macType = "V1";
				var x = 0;
				mui.confirm("是否打印当前条件汇总", " ", ["打印", '取消'], function(e) {
					if(e.index == 0) {
						for(var i = 0; i < btn.length; i++) {
							if(btn.eq(i).hasClass("mui-btn-primary")) {
								status = true;
								timeSign = btn.eq(i).attr("data-id");
								break;
								return false;
							}
						}
						if(status === false) {
							if(Input.eq(0).val() != "" && Input.eq(1).val() != "") {
								timeSign = 0;
								start_time = Input.eq(0).val();
								end_time = Input.eq(1).val();
								status = true;
							} else {
								mui.alert("请选择开始时间或结束时间", " ", "关闭", function() {}, "div");
								x = 1;
							}
						};
						if(status === false && x < 1) {
							mui.alert("请选择筛选条件", " ", "关闭", function() {}, "div")
						};
						if(getSysInfo().search("P1") != -1) {
							macType = "P1";
						} else if(getSysInfo().search("V1") != -1) {
							macType = "V1";
						} else if(getSysInfo().search("JICAI") != -1) {
							macType = "JICAI";
						}
						if(status === true) {
							plus.nativeUI.showWaiting("正在打印中，请勿退出...");
							if($('.pay').hasClass('selectRadiu')){
								require(weburl + model_print, "json", "post", {
									token: localStorage.getItem("token"),
									time_type: timeSign,
									time_start: start_time,
									time_end: end_time,
									print_kind1: '1',
									macType: macType
								}, function(reponse) {
									console.log(JSON.stringify(reponse))
									plus.nativeUI.closeWaiting();
									if(reponse.status == "success") {
										printAct(reponse.data[0].content);
									} else {
										mui.alert(msg, " ", "关闭", function() {}, "div")
									}
								}, function() {
									plus.nativeUI.closeWaiting();
									mui.alert("网络错误，请稍后再试", " ", "关闭", function() {}, "div")
								});
							}else{
								$('.auth').eq(0).hasClass('selectRadiu')?console.log(1):console.log(2);
								require(weburl + authPriintCount, "json", "post", {
									token: localStorage.getItem("token"),
									time_type: timeSign,
									time_start: start_time,
									time_end: end_time,
									print_kind1: $('.auth').eq(0).hasClass('selectRadiu')?'1':'',
									print_kind2: $('.auth').eq(1).hasClass('selectRadiu')?'2':'',
									macType: macType
								}, function(reponse) {
									plus.nativeUI.closeWaiting();
									if(reponse.status == "success") {
										console.log(JSON.stringify(reponse));
										printAct(reponse.data[0].content);
									} else {
										mui.alert(msg, " ", "关闭", function() {}, "div")
									}
								}, function() {
									plus.nativeUI.closeWaiting();
									mui.alert("网络错误，请稍后再试", " ", "关闭", function() {}, "div")
								});
							}
							return;
						}

					}
				}, "div");

				function alert(msg) {
					if(msg != "") {
						mui.alert(msg, " ", "关闭", function() {}, "div")
					}
				}
			})
		});
	</script>

</html>